<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_header_include::frag(~{::title},~{::link},~{::style})">
    <title>分页插件</title>
    <link rel="stylesheet" th:href="@{/css/custom/homepage/index.css}">
    <style>
        .devin{
            color:red;
        }
    
    </style>
</head>
<body>
	<div id="pageTable">

         <el-table :data="tableData3" height="650" style="width: 100%"> 
          <el-table-column prop="area" label="区域" width="180"> </el-table-column> 
          <el-table-column prop="name" label="姓名" width="180"> </el-table-column> 
          <el-table-column prop="address" label="地址"> </el-table-column> 
         </el-table> 
          <!-- 1. 分页 组件 -  getQuery 为 查询后台数据的方法->
         <table-pagination :pager="pager" @change="getQuery"></table-pagination>
	</div>

<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>

<script>

 var vm = new Vue({
     el:'#pageTable',
     data:{
    	 //2.分页组件
    	tableData3:[],
    	pager:{
    		total: 0,
    		currentPage: 1,
    	    pageSize: 10,
    	}
     },
     methods:{
    	 getQuery(){
    		 this.initTableData();
    	 },
    	 initTableData(){
             var pageSize = this.pager.pageSize;
             var pageNum = this.pager.currentPage;
             var param = {};
             axios.post('/demo/listTableByPageNum2?pageNum='+pageNum+"&pageSize="+pageSize,param)
                 .then(function (response) {
                     var data =  response.data
                     vm.tableData3= data.data;
                     //3.分页组件
                     vm.pager.total= data.total;
                     vm.pager.currentPage = data.currentPage;
                     vm.pager.pageSize = data.pageSize;
                    
                 })
                 .catch(function (error) {
                   console.log(error);
                 })
                 .then(function () {
                   // always executed
                 });  
         }
        
     },
     created(){
       this.getQuery();
     },
     mounted(){
        console.info("mounted method");
     }
     
 });
 
</script>
</body>
</html>